<template>
  <!-- 外层 -->
  <div class="container">
    <!-- 内部卡片 -->
    <div class="card">
      <!-- 内容添加部分 -->
      <div class="addArea">
        <!-- 全选复选框 -->
        <input type="checkbox" name="" id="">
        <!-- 内容输入框 -->
        <input class="inp" type="text" placeholder="请输入任务内容，按下回车添加">
      </div>
      <!-- 列表内容部分呢 -->
      <!-- <div class="listArea"> -->
        <ul class="listArea">
          <li>
            <input type="checkbox" name="" id="">
            <span>学习任务</span>
          </li>
          <li>
            <input type="checkbox" name="" id="">
            <span>学习任务</span>
          </li>
          <li>
            <input type="checkbox" name="" id="">
            <span>学习任务</span>
          </li>
          <li>
            <input type="checkbox" name="" id="">
            <span>学习任务</span>
          </li>
          <li>
            <input type="checkbox" name="" id="">
            <span>学习任务</span>
          </li>
          <li>
            <input type="checkbox" name="" id="">
            <span>学习任务</span>
          </li>
          <li>
            <input type="checkbox" name="" id="">
            <span>学习任务</span>
          </li>
          <li>
            <input type="checkbox" name="" id="">
            <span>学习任务</span>
          </li>
          <li>
            <input type="checkbox" name="" id="">
            <span>学习任务</span>
          </li>
          <li>
            <input type="checkbox" name="" id="">
            <span>学习任务</span>
          </li>
          <li>
            <input type="checkbox" name="" id="">
            <span>学习任务</span>
          </li>
        </ul>
      <!-- </div> -->
      <div class="footer">
        <!-- 剩余 -->
        <p>剩余4</p>
        <div class="middle">
          <button>全部</button>
          <span>未完成</span>
          <span>已完成</span>
        </div>
        <p>清除已完成</p>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>

</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 5000px;

  background-color: #999;
  overflow: hidden;

  .card {
    width: 70%;
    min-height: 400px;
    background-color: #fff;
    // position: absolute;
    // left: 0;
    // right: 0;
    // top: 50px;
    margin:50px auto;
    // overflow: hidden;

    .addArea {
     padding: 20px;
     border-bottom: 1px solid #999;
      .inp {
        border: none;
        background-color: #fff;
        width: 80%;
        margin-left: 20px;
        
      }

    }
    .listArea{
      padding: 20px;
      border-bottom: 1px solid #999;
      list-style: none;
      line-height: 40px;
      li{
        height: 40px;
        border-bottom: 1px solid #aaa;
        span{
          margin-left: 20px;
        }
      }
    }
    .footer{
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      .middle{
        width: 200px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        button{
          border: none;
        }
      }
    }
  }
}
</style>